<template>
  <div class="player-container">
    <!-- 播放器头部 -->
    <div class="player-header">
      <h1 class="player-title">网易云音乐</h1>
      <div class="player-controls">
        <button class="control-btn">♥</button>
        <button class="control-btn">☰</button>
      </div>
    </div>

    <!-- 播放器封面 -->
    <div class="player-cover" :class="{ playing: isPlaying }">
      <img :src="currentSong.cover" :alt="currentSong.name" />
    </div>

    <!-- 播放器信息 -->
    <div class="player-info">
      <h2 class="song-title">{{ currentSong.name }}</h2>
      <p class="song-artist">{{ currentSong.artist }}</p>
    </div>

    <!-- 进度条 -->
    <div class="progress-container">
      <progress-bar
        :current-time="currentTime"
        :duration="duration"
        @seek="handleSeek"
      />
    </div>

    <!-- 播放控制按钮 -->
    <div class="player-controls">
      <button class="control-btn" @click="toggleShuffle"></button>
      <button class="control-btn" @click="prevSong">K</button>
      <button class="control-btn play-btn" @click="togglePlay">
        {{ isPlaying ? "⏸" : "⏵" }}
      </button>
      <button class="control-btn" @click="nextSong">M</button>
      <button class="control-btn" @click="toggleRepeat"></button>
    </div>

    <!-- 音量控制 -->
    <div class="player-controls">
      <volume-control :volume="volume" @volume-change="handleVolumeChange" />
    </div>

    <!-- 播放列表 -->
    <div class="playlist">
      <div class="playlist-header">
        <h3 class="playlist-title">播放列表</h3>
        <span class="playlist-count">{{ playlist.length }}首</span>
      </div>
      <play-list
        :playlist="playlist"
        :current-index="currentIndex"
        @select-song="selectSong"
      />
    </div>

    <!-- 音频元素 -->
    <audio
      ref="audioElement"
      @timeupdate="updateTime"
      @ended="handleSongEnd"
      @loadedmetadata="updateDuration"
    ></audio>
  </div>
</template>

<script>
import { ref, computed, watch } from "vue";
import ProgressBar from "./ProgressBar.vue";
import PlayList from "./PlayList.vue";
import VolumeControl from "./VolumeControl.vue";

export default {
  name: "AudioPlayer",
  components: {
    ProgressBar,
    PlayList,
    VolumeControl
  },
  setup() {
    const audioElement = ref(null);
    const isPlaying = ref(false);
    const currentIndex = ref(0);
    const currentTime = ref(0);
    const duration = ref(0);
    const volume = ref(0.7);
    const isShuffle = ref(false);
    const isRepeat = ref(false);
    const playlist = ref([
      {
        id: 1,
        name: "我记得",
        artist: "赵雷",
        duration: "4:29",
        cover:
          "https://meting.zhheo.com\?server=netease&type=pic&id=109951169682871673",
        url: "https://meting.zhheo.com\?server=netease&type=url&id=1974443814",
      },
      {
        id: 2,
        name: "晚安",
        artist: "丢火车",
        duration: "3:46",
        cover:
          "https://meting.zhheo.com\?server=netease&type=pic&id=109951165250070729",
        url: "https://meting.zhheo.com\?server=netease&type=url&id=34923114",
      },
      {
        id: 3,
        name: "秋酿",
        artist: "房东的猫",
        duration: "4:59",
        cover:
          "https://meting.zhheo.com\?server=netease&type=pic&id=18598239185572641",
        url: "https://meting.zhheo.com\?server=netease&type=url&id=30635613",
      },
      {
        id: 4,
        name: "世间美好与你环环相扣",
        artist: "柏松",
        duration: "3:43",
        cover:
          "https://meting.zhheo.com\?server=netease&type=pic&id=109951164071024476",
        url: "https://meting.zhheo.com\?server=netease&type=url&id=1363948882",
      },
    ]);

    const currentSong = computed(() => {
      return playlist.value[currentIndex.value];
    });

    watch(currentIndex, (newIndex) => {
      if (audioElement.value) {
        audioElement.value.src = playlist.value[newIndex].url;
        if (isPlaying.value) {
          audioElement.value.play();
        }
      }
    });

    const togglePlay = () => {
      if (isPlaying.value) {
        audioElement.value.pause();
      } else {
        audioElement.value.play();
      }
      isPlaying.value = !isPlaying.value;
    };

    const updateTime = () => {
      currentTime.value = audioElement.value.currentTime;
    };

    const updateDuration = () => {
      duration.value = audioElement.value.duration;
    };

    const handleSeek = (percent) => {
      audioElement.value.currentTime = percent * duration.value;
    };

    const nextSong = () => {
      if (isShuffle.value) {
        currentIndex.value = Math.floor(Math.random() * playlist.value.length);
      } else {
        currentIndex.value = (currentIndex.value + 1) % playlist.value.length;
      }
    };

    const prevSong = () => {
      if (currentTime.value > 3) {
        audioElement.value.currentTime = 0;
      } else {
        currentIndex.value =
          (currentIndex.value - 1 + playlist.value.length) % playlist.value.length;
      }
    };

    const handleSongEnd = () => {
      if (isRepeat.value) {
        audioElement.value.currentTime = 0;
        audioElement.value.play();
      } else {
        nextSong();
      }
    };

    const toggleShuffle = () => {
      isShuffle.value = !isShuffle.value;
    };

    const toggleRepeat = () => {
      isRepeat.value = !isRepeat.value;
    };

    const selectSong = (index) => {
      currentIndex.value = index;
      if (!isPlaying.value) {
        togglePlay();
      }
    };

    const handleVolumeChange = (newVolume) => {
      volume.value = newVolume;
      audioElement.value.volume = newVolume;
    };

    return {
      audioElement,
      isPlaying,
      currentIndex,
      currentTime,
      duration,
      volume,
      playlist,
      currentSong,
      togglePlay,
      updateTime,
      updateDuration,
      handleSeek,
      nextSong,
      prevSong,
      handleSongEnd,
      toggleShuffle,
      toggleRepeat,
      selectSong,
      handleVolumeChange
    };
  }
};
</script>